
<template>
  <div>
    <div class="login-container">
      <Row :gutter="32" type="flex" justify="center">
        <Col span="8" class="demo-tabs-style1">
          <Card>
            <Tabs>
              <TabPane label="登录">
                <Form
                  ref="formValidate"
                  :model="formValidate"
                  :rules="ruleValidate"
                  :label-width="80"
                >
                  <FormItem label="手机号" prop="loginphoneNumber">
                    <Input v-model="formValidate.loginphoneNumber" placeholder="请输入手机号"></Input>
                  </FormItem>
                  <FormItem label="密码" prop="loginpwd">
                    <Input v-model="formValidate.loginpwd" placeholder="请输入密码"></Input>
                  </FormItem>
                  <FormItem>
                    <Button type="primary" @click="handleSubmit('formValidate')">登录</Button>
                  </FormItem>
                </Form>
              </TabPane>
              <TabPane label="注册">
                <Input
                  type="text"
                  placeholder="输入手机号"
                  v-model="phoneNumber"
                  style="text-align:center"
                >
                  <Icon type="ios-person-outline" slot="prepend"></Icon>
                </Input>
                <div class="flex">
                  <Input
                    type="text"
                    placeholder="输入获取的验证码"
                    style="text-align:center"
                    v-model="code"
                  >
                    <Icon type="ios-person-outline" slot="prepend"></Icon>
                  </Input>
                  <Button
                    style="background:#ff6060;color:#fff"
                    @click.stop="getCode()"
                  >{{getCodeText}}</Button>
                </div>
                <Input v-model="pwd" placeholder="输入密码">
                  <Icon type="ios-person-outline" slot="prepend"></Icon>
                </Input>
                <Button style="width:60%;font-size:16px" @click="doReg">注册</Button>
              </TabPane>
            </Tabs>
          </Card>
        </Col>
      </Row>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      phoneNumber: "",
      code: "",
      realcode: Number,
      getCodeText: "获取验证码",
      getCodeBtnColor: "#000",
      getCodeisWaiting: false,
      pwd: "",
      formValidate: {
        loginphoneNumber: "",
        loginpwd: ""
      },
      ruleValidate: {
        loginphoneNumber: [
          {
            required: true,
            message: "请输入手机号",
            trigger: "blur"
          }
        ],
        loginpwd: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur"
          },
          {
            type: "string",
            min: 4,
            message: "请输入密码",
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    Timer() {},
    getCode() {
      var that = this;

      if (this.getCodeisWaiting) {
        return;
      }
      if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phoneNumber)) {
        alert("请填写正确手机号码");
        return false;
      }
      that.$http
        .apost("ginfo", {
          op: "smscode",
          telnum: this.phoneNumber
        })
        .then(res => {
          console.log(res);
          this.realcode = res;
        });

      this.getCodeText = "发送中...";
      this.getCodeisWaiting = true;
      this.getCodeBtnColor = "rgba(0,0,0,0.5)";
      //示例用定时器模拟请求效果
      setTimeout(() => {
        alert("验证码已发送");
        this.setTimer();
      }, 1000);
    },
    setTimer() {
      let holdTime = 60;
      this.getCodeText = "重新获取(60)";
      this.Timer = setInterval(() => {
        if (holdTime <= 0) {
          this.getCodeisWaiting = false;
          this.getCodeBtnColor = "#ffffff";
          this.getCodeText = "获取验证码";
          clearInterval(this.Timer);
          return;
        }
        this.getCodeText = "重新获取(" + holdTime + ")";
        holdTime--;
      }, 1000);
    },
    // 验证并提交
    doReg(e) {
      console.log(this.phoneNumber);
      console.log(this.pwd);
      var that = this;
      //验证规则
      if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phoneNumber)) {
        alert("请填写正确手机号码");
        return false;
      }
      //比对验证码是否正确。
      if (this.code != this.realcode) {
        alert("验证码不正确");
        return false;
      }
      //比对验证码是否正确。
      if (!this.pwd) {
        alert("密码不正确");
        return false;
      }
      alert("提交中");
      // //注册信息上传服务器。
      that.$http
        .apost("login", {
          op: "regedit",
          telnum: this.phoneNumber,
          pwd: this.pwd
        })
        .then(res => {
          alert(res);
          if (res == 1) {
          }
        });
    },
    // 登陆
    handleSubmit(name) {
      var full = this.formValidate,
      that = this;
      this.$refs[name].validate(valid => {
        if (valid) {
          this.$Message.success("登录成功,即将跳转首页!");
          that.$http
            .apost("login", {
              op: "login",
              telnum: full.loginphoneNumber,
              pwd: full.loginpwd
            })
            .then(res => {
              var ja = JSON.stringify(res);
              localStorage.setItem("user_info", ja);
              localStorage.setItem("login_time", Number(new Date()) + 21600);
              var t = window.location.href;
						var u = t.substring(0, t.indexOf('#'));
						window.location.href = u;
            });
        } else {
          this.$Message.error("登录失败,请重试!");
        }
      });
    }
  }
};
</script>
<style>
/* /这里加上scoped就不起作用/  */
.ivu-tabs-nav {
  left: 50%;
  transform: translateX(-50%);
  font-size: 20px;
}

/* /手机端模态框/  */
.qqwximg {
  height: 38px;
}

.error-text {
  color: #fa8341;
}

.login-container {
  padding: 50px;
}
</style>